<template>
  <div class="app-container">
    <!-- 训练营信息展示 -->
    <div style='margin:10px;color:#555'><h4>训练营库存管理</h4></div>
    <el-table 
      ref="multipleTable" 
      v-loading="listLoading" 
      :data="camplist" 
      element-loading-text="Loading" 
      border 
      fit 
      highlight-current-row
      >
      <el-table-column align="center" type='index' label="序号" width="55">
      </el-table-column>
      <el-table-column label="课程名" prop='name'>
      </el-table-column>
      <el-table-column label="价格"  align="center" prop='price'>
      </el-table-column>
      <el-table-column label="库存"  align="center" prop='stock'>
      </el-table-column>
      <el-table-column label="操作" width='200px' align="center" prop=''>
        <template slot-scope="scope">
          <el-button 
            size="mini" 
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            icon="el-icon-s-tools"
          >库存修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background :hide-on-single-page='true' layout="prev, pager, next" align='center' :total="total" @current-change='change_page'>
    </el-pagination>
    <!-- 修改用户 -->
    <el-dialog :visible.sync="UpdateCamp" top="5vh">
      <el-form :model="campp" label-width="80px">
        <el-form-item label="库存量">
          <el-input v-model="campp.stock"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消修改</el-button>
        <el-button type="primary" @click="submit">提交修改</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { set_stock_post, get_camp_get } from "../axios_api/api"
import { getList } from '@/api/table'
// import { constants } from 'zlib';

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      campp: {
        id:'',
				stock: "",
      },
      search: "",
      camplist:[],
      update: false,
      list: null,
      listLoading: true,
      user_switch: true,
      // 管理员名
      username: localStorage.getItem("username"),
      // 弹窗变量
      UpdateCamp: false,
      datas: {},
      // 分页
      total: 0,
      page: 1,
      size: 10,
    }
  },
  mounted() {
    this.get_camp();
  },
  methods: {
    // 提交修改
    submit() {
      var data = {id:this.campp.id, stock:this.campp.stock}
      console.log(data)
      set_stock_post(data).then(resp=>{
        this.$message(resp.message)
        this.$router.go(0)
      })
    },
    // 取消修改
    cancel() {
      this.get_camp()
      this.$message({
        type: 'info',
        message: '已取消修改'
      });
      this.UpdateCamp = false;
    },
    // 换页
    change_page(val) {
      this.page = val
      this.get_camp()
    },
    // 编辑
    handleEdit(index, data) {
      this.UpdateCamp = true;
      this.campp = data
    },
    // 获取用户列表drillcourse
    get_camp() {
      get_camp_get().then(res => {
          // // 将用户传入userlist列表中
          this.camplist = res.data;
          this.listLoading = false
      })
    },
  },
}
</script>
<style>
.input {
  width: 800px;
  float: left;
  margin: 0 10px 0 400px;
  margin-right: 5px;
}
</style>